<template>
    <div>
        <a-upload
            listType="picture-card"
            :customRequest="upload"
            :beforeUpload="beforeUpload"
            :fileList="fileListArr"
            @preview="handlePreview"
            :remove="handleChange"
            v-decorator="['evidence']"
            >
            <div v-if="fileListArr.length < 8">
                <a-icon :type="loading ? 'loading' : 'plus'" :style="{fontSize: '30px'}"/>
            </div>
        </a-upload>
        <!-- <div v-if="disabled && fileList.length >0" class="img-displayed">
            <img class="img-view" v-for="(k,v) in fileList" :key="k" :src="v.url" @click="viewDisplayedImage(v.url)"/>
        </div> -->
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img style="width: 100%" :src="previewImage"/>
        </a-modal>
    </div>
</template>

<script>
    import {getBase64} from "@/utils/ImageBase64";
    export default {
        name: "upload",
        props: ['fileList'],
        data(){
            return {
                previewVisible: false,
                previewImage: '',
                loading: false,
                fileListArr: [],
                images:[],
                uid: 0
            }
        },
        mounted() {
            if(this.fileListArr.length <1){
                this.fileListArr= this.fileList
            }
             if(this.fileList.length >0){
                 this.fileList.forEach(val => {
                    this.images.push(val.name)
                });
             }
        },
        methods: {
            handleCancel() {
                this.previewVisible = false
            },
            handlePreview(file) {
                this.previewImage = file.url || file.thumbUrl
                this.previewVisible = true
            },
            handleChange (item) {
                /* this.fileList = this.fileList.filter(item => {
                    return item.status !== 'removed'
                }); */
                this.images=[]
                let delkey = 0
                this.fileListArr.forEach((val,key) => {
                    if(val.status === undefined){
                        this.images.push(val.name)
                    } else{
                        delkey = key
                    } 
                });
                this.fileListArr.splice(delkey,1)
                this.$emit('setImages', this.images)
                //this.$emit('setImagesChange', this.fileList)
            },
            beforeUpload(file) {
                const typeB = file.type == "image/jpeg" || file.type == "image/png";
                if (!typeB) {
                    this.$message.error("请选择jpg,png格式的图片", 1);
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error("图片大小必须小于2MB!", 1);
                }
                return typeB && isLt2M;
            },
            upload(file) {
                getBase64(file.file, base64 => {
                    this.http("post", "upload/upload", {image: base64}).then(res => {
                        this.fileListArr.push({uid: this.uid++, name: res.url, url: res.imgurl})
                        this.images.push(res.url)
                        this.$emit('setImages', this.images)
                        this.loading = false;
                    });
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    

</style>